import React from 'react'
import {Table, Button, Popconfirm, message} from 'antd'

import AddEventModal from '../../components/AddEventModal'

import './index.css'

export default function AccountEvent() {

  const columns = [
    {
      title: '事件名称',
      dataIndex: 'name',
      align: 'center',
      width: '60%',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text, record) => (
          <Popconfirm title="删除后无法恢复哦" okText="确定" cancelText="取消" onConfirm={() => remove(record.id)}>
            <Button type="text" danger>删除</Button>
          </Popconfirm>
      ),
    },
  ];

  const [events, setEvents] = React.useState([
    {id: 1, name: '结婚'},
    {id: 2, name: '升学'},
    {id: 3, name: '嫁娶'},
    {id: 4, name: '丧礼'},
    {id: 5, name: '乔迁'},
    {id: 6, name: '满月'},
    {id: 7, name: '探望'},
    {id: 8, name: '母猪下崽'},
    {id: 9, name: '升迁'},
    {id: 10, name: '移民'},
  ])
  // 表格已选中的行
  const [selectedKeys, setSelectedKeys] = React.useState([])
  // 新增事件弹窗显示
  const [addEventModalVisible, setAddEventModalVisible] = React.useState(false)

  /**
   * 删除事件
   * @param eventId 事件 ID
   */
  function remove(eventId) {
    setEvents(events => {
      return events.filter(e => {
        return e.id !== eventId
      })
    })
    message.success('事件删除成功')
  }

  /**
   * 显示新增事件弹窗
   */
  function showAddEventModal() {
    setAddEventModalVisible(true)
  }

  /**
   * 关闭新增事件弹窗
   */
  function handleAddEventModalCancel() {
    setAddEventModalVisible(false)
  }

  function addEvent(event) {
    console.log(event)
    setEvents(events => {
      return [event, ...events]
    })
  }

  return (
    <div>
      <div className="controlPanel">
        <Button type="primary" onClick={() => showAddEventModal()}>新增</Button>
      </div>
      <Table 
        // 这里增加行点击事件会导致在点击「删除」按钮把数据删掉后，ID 还留在 selectedKeys 中
        // 考虑是事件冒泡的问题，但是如果传函数指针拿不到要删除的 ID，直接调用函数又拿不到事件对象
        // onRow={
        //   record => {
        //     return {
        //       onClick: event => {
        //         setSelectedKeys(selectedKeys => {
        //           const currentClickKey = record.id
        //           const index = selectedKeys.indexOf(currentClickKey)
        //           let keys = []
        //           if (index === -1) {
        //             keys = [...selectedKeys, currentClickKey]
        //           } else {
        //             selectedKeys.splice(index, 1)
        //             keys = [...selectedKeys]
        //           }
        //           return keys
        //         })
        //       }
        //     }
        //   }
        // }
        rowSelection={{
          type: 'checkbox',
          columnWidth: '10%',
          selectedRowKeys: selectedKeys,
          onChange: (selectedRowKeys, selectedRows) => {
            setSelectedKeys(selectedKeys => selectedRowKeys)
          },
          selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
          ]
        }}
        pagination={{
          hideOnSinglePage: false,
          total: events.length
        }}
        rowKey={record => record.id} 
        bordered={true} 
        columns={columns} 
        dataSource={events} />

        <AddEventModal 
          visible={addEventModalVisible} 
          close={() => handleAddEventModalCancel()} 
          addEvent={addEvent}/>
      

    </div>
  )
}
